<template>
  <el-container>
    <el-aside
      class="bg-white"
      width="420px"
    >
      <!--左侧搜索条件-->
      <div class="material-filter-container">
        <el-tabs :stretch="true" type="border-card">
          <el-tab-pane label="待审核"/>
          <el-tab-pane label="已审核"/>
          <el-tab-pane label="已取消"/>
          <el-tab-pane label="全部"/>
        </el-tabs>
      </div>
      <div class="container-ymm container_tabs">
        <el-row :gutter="10">
          <span class="date-inout">创建日期</span>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="19">
            <el-input placeholder="输入供应商、SKU查询" class="s-input" prefix-icon="el-icon-search"/>
          </el-col>
          <el-col :span="5">
            <el-button type="primary">查询</el-button>
          </el-col>
        </el-row>
        <el-row >
          <div class="list">
            <div class="item">
              <p class="name">深圳App</p>
              <el-row type="flex" justify="space-between">
                <span class="price">￥12000</span><span class="date">03/10</span>
              </el-row>
            </div>
          </div>
        </el-row>
      </div>

    </el-aside>
    <el-main>
      <div class="container-ymm" style="margin-left:15px;">
        <div class="pl-30 pr-30">
          <el-row :gutter="10" style="text-align:right" class="pt-15 pb-15">
            <el-col :span="6"/>
            <el-button type="primary" @click="goAdd">新建</el-button>
            <el-button type="primary" @click="approveFun">审批</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button type="primary">取消</el-button>
            <el-button type="primary">打印</el-button>
          </el-row>
          <el-row :gutter="20" style="margin-bottom: 15px;border: 1px dashed #eee"/>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="订单号">订单号:</div>
                </el-col>
                <el-col :span="17">
                  <div
                    class="shipment_div"
                  >{{ shipmentObj.shipmentCreateDatetime| parseTime('{y}-{m}-{d}') }}</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="订单来源">订单来源:</div>
                </el-col>
                <el-col :span="17">
                  <div
                    class="shipment_div"
                  >{{ shipmentObj.supplierName?shipmentObj.supplierName:"--" }}</div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label">状态:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ (shipmentObj.proceedCompany) }}</div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="创建时间">创建时间:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ (shipmentObj.partnerName) }}</div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="用户">用户:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ shipmentObj.disName?shipmentObj.disName:"--" }}</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="提货方式">提货方式:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ shipmentObj.expressInfo?shipmentObj.expressInfo:"--" }}</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="其他备注">其他备注:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ shipmentObj.instorageNo?shipmentObj.instorageNo:"--" }}</div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="其他备注">其他备注:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ shipmentObj.instorageNo?shipmentObj.instorageNo:"--" }}</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="出库单号">出库单号:</div>
                </el-col>
                <el-col :span="17">
                  <div
                    class="shipment_div"
                  >{{ shipmentObj.outstorageNo?shipmentObj.outstorageNo:"--" }}</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="上游总计">上游总计:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">￥{{ (shipmentObj.productUpTotalAmount) }}</div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="下游总计">下游总计:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">￥{{ shipmentObj.productDownTotalAmount }}</div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="发送状态">发送状态:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ shipmentObj.recordStatus }}</div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row :gutter="20"/>
        </div>
        <div >
          <div class="table-ymm">
            <el-table :data="tableData" style="width: 100%" border>
              <el-table-column label="分类">
                <template slot-scope="scope">
                  <span style="color:#28A087">{{ scope.row.name1 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="SKU编码">
                <template slot-scope="scope">
                  <span >{{ scope.row.name2 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="SKU名称">
                <template slot-scope="scope">
                  <span >{{ scope.row.name3 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="数量">
                <template slot-scope="scope">
                  <span >{{ scope.row.name4 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="销售单价">
                <template slot-scope="scope">
                  <span >{{ scope.row.name5 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="实销单价">
                <template slot-scope="scope">
                  <span >{{ scope.row.name6 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="实销小计">
                <template slot-scope="scope">
                  <span v-if="scope.row.name7=='1'" style="color:#28A087">发货中</span>
                  <span v-else-if="scope.row.name7=='2'" style="color:#F05050">待发货</span>
                  <span v-else> 已发货</span>
                </template>
              </el-table-column>

            </el-table>
          </div>
          <div class="table-ymm-bt">
            <el-pagination :current-page="table.current_page" :page-sizes="[10, 20, 30, 40]" :page-size="10" :pager-count="table.page_count" :total="table.total" background layout="sizes, prev, pager, next,total" @current-change="handleCurrentChange"/>
          </div>
          <component :is="modal" :modal-data="modalData" @close="closeChild"/>
        </div>
      </div>
    </el-main>

  </el-container>
</template>

<script>
import Approve from './dialog/Approve.vue'
export default {
  data() {
    return {
      modal: null, modalData: {},
      shipmentObj: {},
      tableData: [
        {
          name1: 'FH45454523215', name2: '供应商代发', name3: '供应商代发', name4: '供应商代发', name5: '供应商代发', name6: '供应商代发', name7: '1', name8: '供应商代发', name9: '供应商代发',
          name10: '供应商代发', name11: '供应商代发', name12: '供应商代发', name13: '供应商代发', name14: '供应商代发', name15: '供应商代发', name16: '供应商代发'
        },
        {
          name1: 'FH45454523215', name2: '供应商代发', name3: '供应商代发', name4: '供应商代发', name5: '供应商代发', name6: '供应商代发', name7: '2', name8: '供应商代发', name9: '供应商代发',
          name10: '供应商代发', name11: '供应商代发', name12: '供应商代发', name13: '供应商代发', name14: '供应商代发', name15: '供应商代发', name16: '供应商代发'
        },
        {
          name1: 'FH45454523215', name2: '供应商代发', name3: '供应商代发', name4: '供应商代发', name5: '供应商代发', name6: '供应商代发', name7: '3', name8: '供应商代发', name9: '供应商代发',
          name10: '供应商代发', name11: '供应商代发', name12: '供应商代发', name13: '供应商代发', name14: '供应商代发', name15: '供应商代发', name16: '供应商代发'
        }
      ],
      table: {
        current_page: 1, page_count: 7, total: 100
      }
    }
  },
  created() {
  },
  methods: {
    closeChild() {
      this.modal = null
    },
    approveFun() {
      this.modalData = { type: '111' }
      this.modal = Approve
    },
    goAdd() {
      this.$router.push('/order/add')
    },
    // 分页
    handleCurrentChange() {

    },
    // 表格选择
    handleSelectionChange() {

    }
  }
}
</script>

<style >

.shipment_label {
  float: left;
  font-family: 'Microsoft Yahei';
  font-size: 16px;
}

.shipment_div {
  float: left;
  font-family: 'Microsoft Yahei';
  font-size: 13px;
  font-weight: 500;
}
.material-filter-container > .el-row,
.shipment_header {
  border: 1px;
  color: #333;
  line-height: 30px;
}

.el-aside {
  color: #333;
  line-height:18px;
}

.el-main {
  color: #333;
  text-align: center;
  line-height:30px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-container:nth-child(5) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-pagination__total,
.el-pagination__sizes,
.btn-prev,
.el-pager,
.btn-next,
.el-pagination__jump {
  margin-top: 2px !important;
}
.el-pagination {
  line-height: 1px;
  white-space: pre-wrap;
}
.el-table__body tr.current-row > td {
  background-color: #dde9fc;
}

</style>
